<template>
  <div class="container mx-auto">
    <div class="vertical-scoll h-[100vh]" v-loading="loading">
      <!-- 基本用法 -->
      <!-- <vue3-auto-scroll :items="list" :speed="1" direction="up" height="200px" /> -->
      <!-- 自定义配置 -->
      <vue3-auto-scroll :items="list" :speed="1" direction="up" height="100%">
        <!-- 自定义项模板 -->
        <template #item="{ item, index }">
          <div class="custom-item">
            <!-- <el-avatar :size="50" :src="item.avatar" /> -->
            <!-- <el-avatar shape="square" :size="50" :src="item.avatar" /> -->
            <img :src="item.avatar" alt="头像" />
            <div class="info">
              <h3 class="truncate">{{ index + 1 }}、 {{ item.name }}</h3>
              <p class="truncate">{{ item.description }}</p>
            </div>
          </div>
        </template>
      </vue3-auto-scroll>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import Vue3AutoScroll from '@/components/vue3AutoScroll.vue'
import { formatDate, formatAxis, formatPast, parseTime } from '@/utils/formatTime'
const loading = ref(true);
const startTime = performance.now();
const today = new Date();
const yesterday = new Date();
yesterday.setDate(today.getDate() - 1);
console.log(formatPast(today));
console.log(formatAxis(today));
console.log(formatDate(today, 'YYYY年mm月dd日 HH:MM:SS QQQQ'));
console.log(formatDate(today, 'YYYY-mm-dd HH:MM:SS WWW'));
console.log(formatDate(today, 'YYYY-mm-dd HH:MM:SS ZZZ'));
console.log(formatDate(today, 'YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ'));
console.log(formatDate(yesterday, 'YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ'));
console.log(formatDate(yesterday, 'YYYY-mm-dd HH:MM:SS'));
console.log(parseTime(yesterday));

/**
 * 生成安全的随机整数
 * @param min 最小值
 * @param max 最大值
 * @returns 安全的随机整数
 */
function secureRandomInt(min: number, max: number) {
  const range = max - min + 1;
  // 创建一个足够大的随机数，以减少模偏差
  const randomValue = new Uint32Array(1);
  crypto.getRandomValues(randomValue);
  // 确保生成的随机数在指定范围内
  return min + (randomValue[0] % range);
}
// console.log(secureRandomInt(1, 6));   // 模拟安全的骰子
// console.log(secureRandomInt(1000, 9999)); // 生成一个安全的 4 位验证码

const listData = Array.from({ length: 20 }, (_, i) => ({
  id: `item_${i}`, // 使用更可靠的ID生成方式
  avatar: `https://picsum.photos/200?random=${i}`,
  name: `Vue3.0无缝滚动展示数据第${i + 1}条`,
  description: `Vue3.0无缝滚动展示数据第${i + 1}条`,
}));
const list = ref(listData);

// 组件挂载后初始化
onMounted(() => {
  // 等待组件渲染完成
  const endTime = performance.now();
  console.log(`组件渲染完成，页面加载耗时: ${endTime - startTime} 毫秒`);
  loading.value = false;
});
onUnmounted(() => {
  console.log('组件卸载');
})
</script>

<style scoped lang="scss">
.vertical-scoll {
  overflow: hidden;
}

.vertical-text {
  height: 300px;
  background-color: #f5f5f5;
  writing-mode: vertical-lr;
  text-orientation: upright;
  line-height: 30px;
  display: inline-block;
}

.custom-item {
  display: flex;
  align-items: center;
  padding: 10px;

  img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 15px;
    object-fit: cover;
    // 添加背景色，确保在图片加载过程中也有占位效果
    background-color: #f0f0f0;
    // 过渡效果，使图片替换更平滑
    transition: opacity 0.3s ease;
    pointer-events: none;
  }

  .info {
    flex: 1;

    h3 {
      margin: 0;
      font-size: 16px;
      user-select: none;
    }

    p {
      margin: 0;
      font-size: 14px;
      color: #666;
      user-select: none;
    }
  }
}
</style>